<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
      .qrcode-top-left{
        max-width: 60%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
      }
    </style>
</head>
<body style="background:#f7f4f2">
<div id="app" class="container"  v-cloak >
    <div class="user-top-container" style="height: 160px;background: #ffffff;margin: 0 auto;padding-top: 30px;">
      <div class="user-top-container-top" >
        <div class="user-avatar" v-myclick="clickUsername">
          <img :src="user.portrait || '../../image/portrait_moren.png'">
        </div>
        <div class="user-title">
          <div class="user-name" v-myclick="clickUsername">{{user.nickname}}</div>
          <div class="user-level" v-show="user.nickname">
            <span class="my_qrcode">我的二维码</span>
            <img v-src="'../../image/4_erweima_1.png'" style="display:inline" onclick="openSharebox()">
          </div>
        </div>
        <img v-myclick="clickUsername" style="position:absolute;right:27px;top:20px;width:7px" class="row-arrow row-arrow-right" v-src="'../../image/arrow_right_grey.png'">
        <div class="my-invite-info" v-show="user.nickname">
          <div  class="invite-info-left">我的邀请码:&nbsp;&nbsp;{{user.invite_code}}</div>
          <div  class="invite-info-right" v-myclick="[user.invite_code, copyInvite]">复制</div>
          </div>

      </div>
    </div>
    <!-- <div class="qrcode-container">
      <div class="qrcode-top">
        <div class="qrcode-top-left"><img src="../../image/demo.jpg"></div>
        <div class="qrcode-top-left">燃烧的企鹅</div>
        <div style="clear:both"></div>
      </div>
      <div class="qrcode-middle"><img src="../../image/erweima.png"></div>
      <div class="qrcode-bottom">在扎堆中扫一扫，添加好友</div>
    </div> -->

    <div class="row-container" style="margin:0 auto;margin-top:10px;border-radius:8px">
      <a v-open-win vurl="level" class="row row-line" v-row-active.tapmode>
         <img  class="row-arrow row-arrow-left" v-src="'../../image/4_level_1.png'">
          <span class="user-setrow">我的等级</span>
          <img class="row-arrow row-arrow-right" v-src="'../../image/arrow_right_grey.png'">
      </a>
      <a v-open-win vurl="myexchange" class="row row-line" v-row-active.tapmode>
         <img  class="row-arrow row-arrow-left" v-src="'../../image/4_duihuan.png'">
          <span class="user-setrow">我的兑换</span>
          <img class="row-arrow row-arrow-right" v-src="'../../image/arrow_right_grey.png'">
      </a>
        <a  v-myclick="myteam" class="row row-line"  >
           <img  class="row-arrow row-arrow-left" v-src="'../../image/4_tuandui_1.png'">
            <span class="user-setrow">我的团队</span>
            <img class="row-arrow row-arrow-right" v-src="'../../image/arrow_right_grey.png'">
        </a>
        <!-- <a v-open-win vurl="submembers" class="row row-line" v-row-active.tapmode>
           <img  class="row-arrow row-arrow-left" v-src="'../../image/4_zhitui_1.png'">
            <span class="user-setrow">我的直接分享</span>
            <img class="row-arrow row-arrow-right" v-src="'../../image/arrow_right_grey.png'">
        </a> -->
        <a v-open-win vurl="share" class="row row-line" v-row-active.tapmode>
           <img  class="row-arrow row-arrow-left" v-src="'../../image/4_fengxiang_1.png'">
            <span class="user-setrow">我的分享</span>
            <img class="row-arrow row-arrow-right" v-src="'../../image/arrow_right_grey.png'">
        </a>
    </div>
    <div class="row-container" style="margin-top:20px;">
      <a v-open-win vurl="settings" class="row row-line" v-row-active.tapmode>
         <img  class="row-arrow row-arrow-left" v-src="'../../image/4_shezhi_1.png'">
          <span class="user-setrow">设置</span>
          <img class="row-arrow row-arrow-right" v-src="'../../image/arrow_right_grey.png'">
      </a>
    </div>

</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/aui-sharebox.js" ></script>
<script>

    var user,
        qrcode,
        scanner,
        wx,
        qq,
        clipBoard,
        vm;

    var mq;
    apiready = function () {
        setBSImg();
        scanner = api.require('FNScanner');
        wx = api.require('wx');
        qq = api.require('QQPlus');
        MNActionButton = api.require('PIActionButton');
        clipBoard = api.require('clipBoard');
        mq = api.require('meiQia');
        if (getPrefs('token')) {
            showProgress();
            var data = {
                member_id: getPrefs('member_id')
            };
            var callback = function (ret) {
                user = ret.content;
                qrcode = 'type=addfriends&member_id='+user.member_id;
                setPrefs('user', user);
                setPrefs('username', user.nickname);
                setPrefs('portrait', user.portrait);
                setPrefs('level_id', user.level_id);

                api.sendEvent({
                    name: 'getUnReadMsgCount',
                    extra: {count: user.unReadMessageCount}
                });
                encodeImg(qrcode);
                // initApp();

            };
            pinet.post(URL.getUserinfo, data, callback);
        } else {
            user = {};
            qrcode = {};
            initApp();
            api.parseTapmode();
        }
        addListeners();
        setUserRefreshHeaderInfo(refresh);
        // setUserRefreshHeaderInfo为下拉刷新
    };
    function openSharebox(){
      var sharebox = new auiSharebox();
    sharebox.init({
        frameBounces:true,//当前页面是否弹动，（主要针对安卓端）
        buttons:[
        //   {
        //     image:'../../image/big/4_weixing_1.png',
        //     text:'微信',
        //     value:'wx'//可选
        // }
      ],
        col:5,
        cancelTitle:'取消'//可选,当然也可以采用下面的方式使用图标
        // cancelTitle:'<i class="aui-iconfont aui-icon-close aui-font-size-16"></i>'//可选
    },function(ret){
        if(ret){
          buttonValue = ret.buttonValue;
          switch (buttonValue) {
            case 'wx':
            vm.share_wx('session');
            case 'wx-circle':
            vm.share_wx('timeline');
            case 'qq':
            vm.share_qq();
              break;
            default:
          }
        }
    })
    var html ='';
     html += '<div class="qrcode-container">';
     html += '<div class="qrcode-top">';
     html += '<div class="qrcode-top-left"><img src="' + (vm.user.portrait?vm.user.portrait:'../../image/portrait_moren.png') + '"/></div>';
     html += '<div class="qrcode-top-left">'+vm.user.nickname+'</div>';
     html += '<div style="clear:both"></div>';
     html += '</div>';
     html += '<div class="qrcode-middle"><img src="' + vm.qrcode + '" /></div>';
     html += '<div class="qrcode-bottom">在扎堆中扫一扫，添加好友</div>';
     html += '</div>';
    $api.append($api.dom('.aui-mask-in'), html);
}

    function encodeImg(qrcode) {
        scanner.encodeImg({
            content: qrcode,
            saveImg: {
                path: 'fs://qrcode_user.png',
                w:400,
                h:400
            }
        }, function (ret) {
            qrcode = {};
            if(ret.status){
               qrcode = ret.imgPath;
            }
            initApp(qrcode);
            listenUpdUser(vm.user);
            api.parseTapmode();
        })
    }

    function initApp(qrcode) {
        vm = new Vue({
            el: '#app',
            data: {
                user: user,
                qrcode: qrcode,
                imgPath: '../../image/',
                appInstalled: {
                    wx: true,
                    qq: true,
                },
                BSImg: {
                    big: Vue.BSImg == 'big',
                    small: Vue.BSImg == 'small',
                },
            },
            methods: {
                clickUsername: function () {
                    if (!getPrefs('token')) {
                        reLogin();
                        return;
                    }
                    openWin('userinfo')

                },
                initMeiQia: function () {
                    showMeiQia();
                },
                myteam:function(){
                  api.openWin({
                      name: 'myteam',
                      reload:true,
                      url: './myteam.html',
                  });

                },
                copyInvite: function (text) {
                    clipBoard.set({
                        value: text
                    }, function (ret) {
                        if (ret) {
                            api.toast({
                                msg: '已复制到剪贴板',
                            });
                        }
                    });
                },
                share: function (share) {
                    if(!getPrefs('token')){
                        reLogin();
                    }else{
                      onEvent('t005_c007','我的-邀请','');
                      attributes={};
                      var sharesuffix = {
                        eventId:'t005_c007_a001',
                        eventLable:'我的-邀请-分享',
                        attributes:attributes
                      }
                      openMNActionInviteButton(share,sharesuffix);
                    }
                    },
                share_wx: function (scene) {
                   var that = this;
                    if(!that.appInstalled.wx){
                      api.alert({
                          title: '提示',
                          msg: '未能检测到本地微信',
                          buttons: ['确定']
                      }, function (ret, err) {});
                    }else{
                      share_wx(scene, vm.user.share);
                    }
                },
                share_wx_image: function (scene) {
                   var that = this;
                    if(!that.appInstalled.wx){
                      api.alert({
                          title: '提示',
                          msg: '未能检测到本地微信',
                          buttons: ['确定']
                      }, function (ret, err) {});
                    }else{
                      share_wx_image(scene, vm.user.share);
                    }
                },
                share_qq: function () {
                  var that = this;
                  if(!that.appInstalled.qq){
                    api.alert('未能检测到本地QQ');
                  }else{
                    share_qq(vm.user.share);
                  }
                },
            },
            created: function () {
                var that = this;
                wx.isInstalled(function (ret) {
                    that.appInstalled.wx = ret.installed;
                });
                qq.installed(function (ret) {
                    that.appInstalled.qq = ret.status;
                });
            }
        })
    }

    function refresh() {
        if (getPrefs('token')) {
            var data = {
                member_id: getPrefs('member_id')
            };
            var callback = function (ret) {
                user = ret.content;
                qrcode = user.qrcode;
                setPrefs('user', user);
                api.sendEvent({
                    name: 'getUnReadMsgCount',
                    extra: {count: user.unReadMessageCount}
                });

                if (vm) {
                    vm.user = user;

                    scanner.encodeImg({
                        content: qrcode,
                        saveImg: {
                            path: 'fs://qrcode.png',
                            w:400,
                            h:400
                        }
                    }, function (ret) {
                        vm.qrcode = {};
                        if(ret.status){
                            vm.qrcode = ret.imgPath;
                        }
                    });
                } else {
                    initApp();
                    api.parseTapmode();
                }
                api.refreshHeaderLoadDone();
            };
            var errback = function () {
                api.refreshHeaderLoadDone();
            };
            pinet.post(URL.getUserinfo, data, callback, errback);
        } else {
            api.refreshHeaderLoadDone();
        }

    }

    function addListeners() {
        api.addEventListener({
            name: 'reLogin'
        }, refresh);

        api.addEventListener({
            name: 'level_up'
        },
        function () {
            refresh();
        }
      );

        api.addEventListener({
            name: 'register'
        }, refresh);

        api.addEventListener({
            name: 'viewappear'
        }, function (ret, err) {
          if (getPrefs('token')) {
            user = JSON.parse(getPrefs('user'));
            if (user.hasPortraitUpd) {
                vm.user.portrait = user.portrait;
                user.hasPortraitUpd = false;
                setPrefs('user', user);
            }
          }
        });
    }

</script>
</html>
